Skip to main content

Question Date Picker

questionDatePicker is a template to be used with asking users to pick a date.

KeyNotes
typequestionDatePicker
stepIdUnique step id
titleThe title of the template
subtitleThe subtitle text
labelThe label of the date picker e.g Pick a date
defaultDateOffsetDaysThe start date of the calendar. For example, if it’s 80, the calendar will show the start date as 80 days in the future.
minDateOffsetDaysThe minimum date that the user can pick. If it’s 30 for example the user will only be able to pick a date starting 30 days in the funture.
labelTextColorThe text color of the label
iconColorThe calender icon color
inputTextColorThe data picker input text color.
inputBackgroundColorThe data picker input background color.
inputBackgroundHoverColorThe bg color of the input on hover
backgroundColorThe step’s background color
textColorThe step main text color
ctaTextThe CTA text e.g Continue
ctaTextColorThe CTA text color
ctaBackgroundColorThe CTA background color
A step example
{
"type": "questionDatePicker",
"title": "Having something to look forward to can be a big motivator to stick to your plan.",
"stepId": "occasion_when",
"subtitle": "Do you have an important event coming up?",
"key": "occasion_when",
"backgroundColor": "#ffffff",
"textColor": "#2F0191",
"ctaText": "Continue",
"ctaTextColor": "#FFF",
"ctaBackgroundColor": "#251C93",
"label": "Pick a date",
"iconColor": "#6455FE",
"inputTextColor": "#2F0191",
"inputBackgroundColor": "#f5f7ff",
"labelTextColor": "#6455FE"
}

Screenshot 2024-11-19 at 3.27.13 PM.png